<template>
  <view class="group-setting" v-if="groupInfo">
    <!-- 成员列表 -->
    <view class="user-list-box">
      <view class="user-list flex flex-wrap-w">
        <view class="item" v-for="(item, index) in memberList" :key="index" @click="onJumpMemberDetails(item)">
          <image class="avatar" :src="item.avatar"></image>
          <text class="nickname">{{item.nick}}</text>
        </view>
        <!-- <view class="item add-member">
          <view class="add-icon flex flex-ai-c flex-jc-c">
            <u-icon name="plus" size="50rpx" color="#999"></u-icon>
          </view>
          <text class="nickname">添加</text>
        </view> -->
      </view>
      <view class="check-more flex flex-ai-c flex-jc-c" v-if="memberList.length < groupInfo.groupProfile.memberCount" @click="onCheckAll">
        <text class="text">查看更多群成员</text>
        <u-icon name="arrow-right" size="26rpx" color="#999"></u-icon>
      </view>
    </view>
    
    <!-- 群资料 -->
    <view class="group-info">
      <view class="cell" @click="onClickEditGroupInfo('name')">
        <view class="top flex flex-ai-c">
          <text class="title">群聊名称</text>
          <text class="value">{{groupInfo.groupProfile.name}}</text>
          <u-icon name="arrow-right" size="26rpx" color="#999" v-if="groupInfo.groupProfile.selfInfo.role === 'Owner' || groupInfo.groupProfile.selfInfo.role == 'Admin'"></u-icon>
        </view>
      </view>
      <view class="cell" @click="onClickEditGroupInfo('notice')">
        <view class="top flex flex-ai-c">
          <text class="title">群公告</text>
          <u-icon name="arrow-right" size="26rpx" color="#999"></u-icon>
        </view>
        <view class="notice-text" v-if="groupInfo.groupProfile.notification"><text>{{groupInfo.groupProfile.notification}}</text></view>
      </view>
    </view>
    
    <!-- 消息免打扰 -->
    <!-- <view class="not-disturb flex flex-ai-c flex-jc-sb">
      <text class="text">消息免打扰</text>
      <u-switch v-model="notDisturb" size="62" active-color="#4CD964"></u-switch>
    </view> -->
    
  </view>
</template>

<script>
import timLogin from '@/utils/timLogin.js' // 导入tim 登录
export default {
  data() {
    return {
      notDisturb: false,
      groupId: '',
      groupInfo: null,
      memberList: []
    }
  },
  onLoad(option) {
    this.groupId = option.id || ''
    uni.showLoading({
      title: '加载中'
    })
    // 登录tim
    if(this.$store.state.isSDKReady) {
      this.getInfo()
    } else {
      timLogin(() => {
        this.getInfo()
      })
    }
  },
  async onShow() {
    if(this.groupInfo) {
      let res = await this.getGroupInfo()
      this.groupInfo = res
    }
  },
  methods: {
    // 点击修改群信息
    onClickEditGroupInfo(type) {
      let info = this.groupInfo
      if(type === 'name'){
        uni.navigateTo({
          url: `/pages_chat/group/editGroupName/editGroupName?id=${info.groupProfile.groupID}&name=${encodeURIComponent(info.groupProfile.name)}`
        })
      } else if(type === 'notice') {
        uni.navigateTo({
          url: `/pages_chat/group/notice/notice?id=${info.groupProfile.groupID}`
        })
      }
    },
    getInfo() {
      Promise.all([this.getGroupInfo(), this.getGroupMember(14)]).then(data => {
        this.groupInfo = data[0]
        this.memberList = data[1]
        uni.hideLoading()
      }).catch(err => {
        uni.hideLoading()
      })
    },
    // 获取群信息
    getGroupInfo(){
      return new Promise((resolve, reject) => {
        // 获取群资料
        this.tim.getConversationProfile(`GROUP${this.groupId}`).then(imResponse => {
          resolve(imResponse.data.conversation)
        }).catch(imError => {
          reject(imError)
        });
      })
    },
    // 获取群成员
    getGroupMember(count){
      return new Promise((resolve, reject) => {
        // 获取群成员列表
        let params = {
          groupID: this.groupId,
          count: count,
          offset: 0
        }
        this.tim.getGroupMemberList(params).then(imResponse => {
          resolve(imResponse.data.memberList)
        }).catch(imError => {
          reject(imError)
        });
      })
    },
    // 查看全部成员
    async onCheckAll() {
      uni.showLoading({
        title: '加载中'
      })
      try{
        let res = await this.getGroupMember(this.groupInfo.groupProfile.memberCount - this.memberList.length)
        uni.hideLoading()
        this.memberList = this.memberList.concat(res)
      }catch(e){
        uni.hideLoading()
      }
    },
    onJumpMemberDetails(item) {
      uni.navigateTo({
        url: `/pages_userModule/memberDetails/memberDetails?id=${item.userID}&from=chat`
      })
    }
  }
}
</script>

<style lang="scss">
page{
  background-color: #f6f6f6;
}
.group-setting{
  overflow: hidden;
  .user-list-box{
    background-color: #fff;
    margin-top: 10rpx;
    padding: 15rpx 0;
    .user-list{
      .item{
        width: 150rpx;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 15rpx 0;
        .avatar{
          width: 96rpx;
          height: 96rpx;
          border-radius: 96rpx;
        }
        .add-icon{
          width: 96rpx;
          height: 96rpx;
          border-radius: 96rpx;
          box-sizing: border-box;
          border: 2rpx dashed #999;
        }
        .nickname{
          margin-top: 8rpx;
          font-size: 26rpx;
          color: #666;
          display: block;
          max-width: 96rpx;
          overflow: hidden;
          word-break: break-all;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 1;
        }
      }
    }
    .check-more{
      padding: 30rpx 0 10rpx;
      .text{
        color: #999;
        font-size: 26rpx;
        margin-right: 10rpx;
      }
    }
  }
  .group-info{
    background-color: #fff;
    margin-top: 24rpx;
    .cell{
      .top{
        padding: 0 30rpx 0 40rpx;
        height: 100rpx;
        border-bottom: 1px solid #F6F6F6;
        .title{
          display: block;
          flex: 1;
          font-size: 32rpx;
          color: #333;
        }
        .value{
          font-size: 32rpx;
          color: #666;
          margin: 0 10rpx 0 20rpx;
        }
      }
      .notice-text{
        font-size: 28rpx;
        color: #666;
        padding: 30rpx 60rpx 30rpx 40rpx;
        line-height: 48rpx;
        overflow: hidden;
        word-break: break-all;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
      }
    }
  }
  .not-disturb{
    margin-top: 24rpx;
    background-color: #fff;
    height: 100rpx;
    padding: 0 30rpx 0 40rpx;
    .text{
      display: block;
      flex: 1;
      font-size: 32rpx;
      color: #333;
      font-weight: bold;
    }
  }
}
</style>
